// create namespace

var ds = new Ext.data.ArrayStore({
    data: [[123, 'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine'], ['10', 'Nine'], ['11', 'Eleven']],
    fields: ['value', 'text'],
    sortInfo: {
        field: 'value',
        direction: 'ASC'
    }
});

var ds = new Ext.data.JsonStore({
    url: 'atlas_list.js',
    root: 'data',
    fields: ['text', 'value']
});
ds.load();


Ext.namespace('pacp');


pacp.singleselect = new Ext.extend(Ext.Window, {
    title: 'Select Atlas Maps',
    collapsible: true,
    maximizable: true,
	singleSelect: false,
    width: 750,
    height: 300,
    minWidth: 300,
    minHeight: 200,
	
    layout: 'fit',
    selectorLabel: 'Atlas',
    plain: true,
    bodyStyle: 'padding:5px;',
    buttonAlign: 'center',
    //    renderTo: 'itemselector',
    initComponent: function(){
        this.items = this.buildWindow();//item selector form
        
        this.buttons = [this.buildButtons()];
        pacp.singleselect.superclass.initComponent.apply(this, arguments);
        //add custom event
        this.addEvents({
            submitselection: true
        })
    },
    //	onRender: function(){
    //		pacp.multiselect.superclass.onRender.apply(this, arguments);
    //	},
    store: ds,
    
    buildWindow: function(){
        var listView = new Ext.list.ListView({
            store: this.store,
            multiSelect: this.singleSelect==false,
			name: 'itemselector',
			
			singleSelect: this.singleSelect,
            emptyText: 'No item to display',
            reserveScrollOffset: true,
            columns: [{
                header: 'text',
                width: .5,
                dataIndex: 'text'
            }, {
                header: 'value',
                dataIndex: 'value'
            }]
        });
		this.isForm = listView;
		var isForm = new Ext.form.FormPanel({
            title: '',
            width: 700,
            bodyStyle: 'padding:10px;',
            items: listView
            
        });
        return isForm
        
        
    },
    
    buildButtons: function(){
        return new Ext.Button({
            text: 'OK',
            handler: function(){
                var values = [];
				Ext.each(this.isForm.getSelectedRecords(), function(r, index){
					values.push(r.get('value'))
				});
                Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />' + values.join(',') );
                    
                    this.hide();
                    //fire event
                    this.fireEvent('submitselection', values, this)
                    
                
            },
            scope: this
        })
    }
    
});





